<template>
    <div class="home">
        <el-container>
            <el-aside width="200px">
                <Menu @select="select"/>
            </el-aside>
            <el-container class="container">
                <Header/>
                <el-main>
                    <Tabs ref="tabs"/>
                </el-main>
                <el-footer>
                    <Footer/>
                </el-footer>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    import Header from "./common/Header";
    import Menu from "./common/Menu";
    import Footer from "./common/Footer";
    import Tabs from "./common/Tabs";

    export default {
        components: {
            Header,
            Footer,
            Menu,
            Tabs
        },
        data() {
            return {}
        },
        methods: {
            select(name) {
                //如果显示首页 就是显示数据概览页面
                name = name == "首页" ? "数据概览" : name
                this.$refs['tabs'].addTab(name)
            }
        },
        mounted() {
            this.select("首页")
        }
    }
</script>

<style lang="scss">

    .home {
        background: #F5F7F9;
        height: 100%;
        width: 100%;

        .el-container {
            height: 100%;
        }
    }
</style>

